<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    .bg-f2{
      background-color: #f8f9fa;
    }
    video{
            width: 320px;
            height: auto;
        }
    .videoRow{
        margin-top: 30px;
    }
    #previewLabel{
        display: block;
        position: absolute;
    }
  </style>
  <title class="mixStream">混流</title>
<link href="../index.74e358e4.css" rel="stylesheet"></head>

<body class="bg-f2">

  <div class="container">
    <div class="my-3 p-3 bg-white rounded box-shadow small">

      <h6 class="border-bottom border-gray pb-2 mb-0 mixStream">混流</h6>

      <div class="row" style="margin-top:1%">

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="audioList"><strong class="text-gray-dark audioDevices">音频设备</strong></label>
            </div>
            <select class="custom-select" id="audioList" style="width: 50%">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoList"><strong class="text-gray-dark videoDevices">视频设备</strong></label>
            </div>
            <select class="custom-select" id="videoList" style="width: 60%">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="roomId"><strong class="text-gray-dark roomid">房间号</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="roomId" style="width: 60%" aria-describedby="emailHelp"
              placeholder="please enter room ID">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm">
          <button type="button" id="createRoom" class="btn btn-primary btn-sm enterRoomPush">进入房间（推流）</button>
          <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
          <button type="button" id="mixStream" class="btn btn-primary btn-sm mixStream">混流</button>
          <button type="button" id="stopMixStream" disabled class="btn btn-primary btn-sm stopMixStream">停止混流</button>
        </div>
      </div>

      <div class="row videoRow">
        <div class="col-sm">
          <label id="previewLabel"></label>
          <video id="previewVideo" autoplay muted playsinline controls></video>
          <video id="mixVideo" autoplay muted playsinline controls style="display:none"></video>
        </div>
        <div class="col-sm remoteVideo">
          <!--<video  autoplay muted playsinline></video>-->
        </div>
      </div>

    </div>
  </div>

<script type="text/javascript" src="../mix/mix.bundle.js"></script></body>

</html>
